<template>
  <div class="container">
    <div class="searchLine conditionLine">
      <el-badge
        v-for="(item,i) in statusList"
        :value="item.total"
        :key="i"
        class="item"
        :class="{'active':key===i}">
        <el-button
          @click="chageStatus(i,item)"
          size="small">{{ item.status }}
        </el-button>
      </el-badge>
    </div>
    <form-renderer
      :content="searchContent"
      inline
      ref="searchForm">
      <el-form-item
        style="float:right;"
        v-if="searchContent.length > 0 ">
        <slot name="buttom"/>
        <el-button
          type="primary"
          @click="search"
          size="small">查询</el-button>
      </el-form-item>
    </form-renderer>
    <!-- 消息中心-->
    <el-table
      ref="multipleTable"
      :data="tableArr"
      tooltip-effect="dark"
      style="width: 100%;"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column
        prop="inform"
        label="消息"
      >
        <template slot-scope="scope">{{ scope.row.inform }}</template>
      </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="curPage"
      :page-sizes="PAGE_NUMBER"
      :page-size="pageSize"
      :layout="PAGINATION_LAYOUT"
      :total="tableArr.length"
    />
  </div>
</template>

<script>
/*
  1.操作、随货同行单、发票应暂时不确定后台字段,无法预设动态暂时写死,后期放开$emit 携带row-data外部处理.
  2.事件集中emit数据,外部进行操作处理
*/
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
export default {
  name: 'Information',
  data () {
    return {
      content: [],
      key: 0,
      activeStatus: '',
      curPage: 1, // 当前页
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      pageSize: PAGE_NUMBER[0] // 一页的数量
    }
  },
  props: {
    searchContent: {
      type: Array,
      default: () => {
        return []
      }
    },
    statusList: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableArr: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {

  // this.curPage = 1,
    // 勾选功能
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 查询功能
    search () {
      let params = this.$refs.searchForm.getFormValue()
      // this.$axios.get(`xxxx`+this.getQuery(params)).then(res => {
      //   // console.log(res);
      //   // this.tableArr = res.content.tableData
      // })
      // console.log(this.getQuery(params))
      console.log(params)
    },
    chageStatus (n, item) {
      this.key = n
      this.activeStatus = item.status
      // 状态切换后 searchForm重置 立即获取相应状态下的table
      this.$refs.searchForm.resetFields()
      console.log(this.activeStatus || this.statusList[0].status)
    },
    // 页码更改
    handleSizeChange (page) {
      console.log('页码更改：', page)
    },
    // 切换不一样的页面,重置一切数据
    handleCurrentChange (curPage) {
      this.curPage = curPage
    }
  }
}
</script>

<style lang="less">
    .container {
      padding: 10px;

      .searchLine {
        margin-bottom: 20px;
      }

      .conditionLine {
        min-height: 45px;
        line-height: 40px;

        .el-button {
          border: 0 !important;
          color: black !important;
          background: transparent !important;

          &.el-button--default:hover {
            background: transparent;
            color: black;
          }
        }

        .active {
          border-bottom: 1px solid #2371c5;

          .el-button {
            font-size: 20px;
            color: #2371c5 !important;

            &.el-button--default:hover {
              background: transparent;
              color: #2371c5 !important;
            }
          }
        }

        .el-badge {
          margin-right: 14px;

          .el-badge__content.is-fixed {
            right: 20px;
          }
        }
      }

      .pagination {
        padding-top: 10px;
        display: flex;
        justify-content: flex-end;
        padding-right: 0;
      }
    }
</style>
